<template>
    <div class="hp-scrollinfo" v-if="dList.length">
        <ul id="con1" ref="panel" :class="{anim:animate==true}">
            <li v-for="(item, index) in dList" :key="index">{{item.title}}</li>
        </ul>
    </div>
</template>
<script>
import axios from 'axios';
export default {
    data () {
        return {
            dList: [],
            animate: false
        }
    },
    created () {
        this.fetch(((list) => {
            this.dList = list.map((item) => {
                return {
                    title: item,
                    url: ''
                }
            });
            if (this.dList.length > 1) {
                this.I = setInterval(() => {
                    this.scroll();
                }, 2500);
            }
        }));
    },
    methods: {
        scroll () {
            var $dom = this.$refs.panel;
            this.animate = !this.animate;
            $dom.style && ($dom.style.marginTop = '-0.8rem');
            setTimeout(() => {
                this.dList.push(this.dList[0]);
                this.dList.shift();
                this.animate = !this.animate;
                $dom.style && ($dom.style.marginTop = '0');
            }, 800);
        },
        fetch (callback) {
            axios.get(`/api/java/notice/list?openid=${window.app.openId}`).then((res) => {
                callback && callback(res.data.data);
            })
        }
    },
    beforeDestroy () {
        clearInterval(this.I);
    }
}
</script>
<style lang="less" scoped>
    @import '~assets/less/variable.less';
    .hp-scrollinfo {
        height: 30px;
        padding: 0 5px;
        background-color: @color-background-white;
        overflow: hidden;
        transition: all 0.5s;
    }
    .anim {
        transition: all 0.5s;
    }
    li {
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        color: @color-secondary-font;
    }
</style>

